<template>
  <h3>我是app组件</h3>
  <h2>姓名:{{ person.name }}</h2>
  <h2>年龄:{{ person.age }}</h2>
  <button @click="HelloTest">测试触发一下Demo组件的Hello事件</button>
</template>

<script>
import {reactive} from "vue";

export default {
  name: 'App',
  props: ['msg', 'student'],
  //TODO  对于全新的配置项(emits)=>用于触发自定义事件时候,告知子组件,然后在函数触发传参
  emits:['hello'],
  setup(props, context) {
//TODO:context中=>attrs相当于props中有未加收的参数(父传子:自定义属性+props)        slots:插槽                  emit:子传父的自定义事件+$emit
    console.log(props, context)
    console.log(context.slots)//插槽
    let person = reactive({
      name: '张三',
      age: 18,
    })

//方法
    function HelloTest() {
      context.emit('hello',6966)
    }

    return {
      person,
      HelloTest
    }
  }
}
</script>

<style>
</style>
